<template>
  <!-- 表单-手机验证 -->
  <van-overlay class="phone-verify-moadl" :show="show" :lock-scroll="false">
    <div class="form-phone-verify" @click.stop>
      <div class="content">
        <p class="form-title">手机验证</p>
        <div class="form-con mt80">
          <van-field
              class="form-input"
              v-model="useInfo.userPhone"
              name="手机号"
              type='tel' clearable
              placeholder="请输入手机号"
              maxlength="11"
              :rules="[{ required: true, message: '请输入领取手机号' }]"
          />
        </div>
        <div class='form-con mt30'>
          <van-field class='form-input' v-model='useInfo.userCaptcha' maxlength='6'
                     placeholder='请输入短信验证码'>
            <template #button>
              <span class='input-field_btn' :disabled='useInfo.flag' slot='button' @click='sendCode'>
                {{ useInfo.buttonMsg }}
              </span>
            </template>
          </van-field>
        </div>
        <div class="confirm-btn" @click="handleConfirmBtnChange">确认选择</div>
      </div>
      <div class="close" @click="handleCancelChange"></div>
    </div>
  </van-overlay>
</template>

<script setup>
import {defineProps, onMounted, reactive, ref} from "vue";
import useUser from "@/store/user.js"
import {showFailToast, showToast} from "vant";
import {isPhoneNumberValid} from "@/utils/utils.js";
import {loginSms} from "@/api/index.js";

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const useInfo = useUser()
const radioData = ref()

onMounted(() => {
  useInfo.userCaptcha = null // 初始化把验证码清空
})


const emits = defineEmits(['handleCancelBtn', 'handleConfirmBtn'])

const handleCancelChange = () => {
  emits("handleCancelBtn")
}
const handleConfirmBtnChange = () => {
  emits("handleConfirmBtn", radioData.value)
}

// 点击获取验证码
const sendCode = () => {
  isPhoneNumberValid(useInfo.userPhone) //验证手机号码是否正确
  if (useInfo.flag === false) {
    // 调用 验证码api接口
    loginSms({mobile: useInfo.userPhone}).then((res) => {
      if (res.code !== 0) {
        showFailToast(res.msg)
      } else {
        showToast(res.msg)
        useInfo.handleCountDownChange()
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.phone-verify-moadl {
  z-index: 1111;

  .form-phone-verify {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    .content {
      padding: 40px 30px 112px;
      width: 586px;
      height: 618px;
      border-radius: 20px;
      overflow: hidden;
      box-sizing: border-box;
      background: #ffffff;

      .form-title {
        font-size: 38px;
        color: #282828;
        font-weight: bold;
        line-height: 1.5em;
      }

      .form-con {
        position: relative;
        box-sizing: border-box;

        .form-input {
          background-color: #f1f1f2;
          border-radius: 10px;

          .input-field_btn {
            color: #e93426;
            font-size: 24px;
            line-height: 1.5em;
            font-weight: 500;
          }
        }
      }

      .confirm-btn {
        margin: 54px auto 0;
        width: 100%;
        height: 90px;
        line-height: 96px;
        text-align: center;
        font-size: 32px;
        color: #ffffff;
        border-radius: 16px;
        background: linear-gradient(to right, #e93425, #ea403c);
      }
    }

    .close {
      margin-top: 40px;
      width: 78px;
      height: 78px;
      background: url("@/assets/image/04_icon_close.png") no-repeat;
      background-size: contain;
    }
  }
}

.van-stepper--round .van-stepper__plus {
  background: #ff3c01;
}

.van-stepper--round .van-stepper__minus {
  color: #ff3c01;
  border: 1px solid #ff3c01;
}
</style>
